<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mytest</title>
    <style>
        body{margin:0;}
        canvas{width: 100%;height: 100%;}
    </style>

</head>
<body>
<script src="../../build/three.min.js"></script>
<!--控制器-->
<script src="../js/controls/TrackballControls.js"></script>
<!--性能-->
<script src="../js/libs/stats.min.js"></script>
<script>
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000);
    camera.position.z = 500;

    controls = new THREE.TrackballControls( camera );

    myGeometry = new THREE.BufferGeometry();

    var vertices = new Float32Array([]);


    myGeometry.addAttribute('position',new THREE.BufferAttribute(vertices,3));
    //材质只给一个颜色
    cube = new THREE.Mesh(myGeometry,new THREE.MeshBasicMaterial({color:0x00ff00,wireframe:true}));

    scene.add(cube);
    //grid 以xz面为平面
    var helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
    helper.position.y = - 75;
    scene.add( helper );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    document.body.appendChild( renderer.domElement );

    renderer.autoClear = false;

    var stats = new Stats();
    document.body.appendChild( stats.dom );

    animate();
    function animate(){
        requestAnimationFrame(animate);
        // cube.rotation.x+=0.01;
        // cube.rotation.y+=0.01;

        controls.update();

        renderer.render(scene,camera);
        stats.update();
    }

</script>
</body>
</html>